<script setup lang="ts">
import { useHomeStore } from "@/stores/homeStore";
import { navigationStore } from "@/stores/navigationStore";
import { useUserStore } from "@/stores/userStore";
import type { navList } from "@/types/navigation";
//获取首页的store实例
const homeStore = useHomeStore();
const { tags } = storeToRefs(homeStore);
//获取用户名store对象
const userStore = useUserStore();
const { userinfo } = storeToRefs(userStore);
//获取用导航store对象
const navStore = navigationStore();
navStore.get_Navlist({
  nid: 18,
  title: "博客",
  order_by: "create_date",
});
const { navList } = storeToRefs(navStore);
//设置添加友链开关
const site_naVisible = ref(false);
//定义添加友链参数
const navtion = ref<navList>({
  nid: 0,
  title: "",
  abstract: "",
  href: "",
  tags: [18],
  icon_href: "",
  status: userinfo.value.result.is_superuser ? 1 : 0,
});
async function add_Navsmg() {
  site_naVisible.value = await navStore.add_Navsmg(navtion.value);
  //获取导航信息

  if (!site_naVisible.value) {
    await navStore.get_Navlist({
      nid: 18,
      title: "博客",
      order_by: "create_date",
    });
    navtion.value = {
      nid: 0,
      title: "",
      abstract: "",
      href: "",
      tags: [18],
      icon_href: "",
      status: userinfo.value.result.is_superuser ? 1 : 0,
    };
  }
}
//获取标签信息
homeStore.gettagsList();
</script>
<template>
  <el-dialog title="添加友链" width="40%" v-model="site_naVisible">
    <div class="dialog_content">
      <div>
        <label for="site_add__title">网站标题</label>
        <el-input
          id="site_add__title"
          placeholder="请输入网站标题"
          v-model="navtion.title"
        >
        </el-input>
      </div>
      <div>
        <label for="site_add__href">网站链接</label>
        <el-input
          id="site_add__href"
          placeholder="请输入网站链接"
          v-model="navtion.href"
        >
        </el-input>
      </div>
      <div>
        <label for="site_add__abstract">网站描述</label>
        <el-input
          id="site_add__abstract"
          placeholder="请输入网站描述"
          type="textarea"
          :rows="4"
          resize="none"
          v-model="navtion.abstract"
        >
        </el-input>
      </div>
      <div>
        <label for="site_add__abstract">网站图标</label>
        <div class="flex">
          <el-input
            id="site_add__abstract"
            placeholder="请输入网站图标的在线链接"
            class="icon_href"
            v-model="navtion.icon_href"
          >
          </el-input>
          <div class="icon_img">
            <img :src="navtion.icon_href" alt="" />
          </div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button>取 消</el-button>
      <el-button type="primary" @click="add_Navsmg">确 定</el-button>
    </span>
  </el-dialog>
  <div class="right">
    <div class="intro">
      <div class="img1"></div>
      <div class="img2">
        <el-avatar
          v-if="userStore.userinfo.status === 'success'"
          :size="80"
          :src="userStore.userinfo.result.avatar"
        />
        <el-avatar
          v-else
          :size="80"
          src="https://api.adicw.cn/uploads/UserAvatar/default.jpg"
        />
      </div>
    </div>
    <div class="about popular">
      <div class="title">关于我</div>
      <div class="xiahuanx"></div>
      <ul>
        <a target="_blank" href="https://github.com/liyu-mm"
          ><li><i class="fa fa-github" aria-hidden="true"></i>GitHub</li></a
        >
        <a target="_blank" href="https://gitee.com/yeyushegnfan"
          ><li><i class="fa fa-git" aria-hidden="true"></i>Gitee</li></a
        >
        <a
          target="_blank"
          href="https://space.bilibili.com/510074701?spm_id_from=333.1007.0.0"
          ><li>
            <i class="fa fa-television" aria-hidden="true"></i>bilibili
          </li></a
        >
        <a target="_blank" href="https://i.csdn.net/#/user-center/profile"
          ><li><i class="fa fa-bookmark-o" aria-hidden="true"></i>CSDN</li></a
        >
      </ul>
    </div>
    <div class="tags popular">
      <div class="title">标签云</div>
      <div class="xiahuanx"></div>
      <div class="body">
        <ul>
          <li v-for="item in tags.result" :key="item.nid">{{ item.title }}</li>
        </ul>
      </div>
    </div>
    <div class="about popular">
      <div
        class="add_fref title"
        @click="site_naVisible = true"
        v-if="userinfo.result.is_superuser"
      >
        添加友链
      </div>
      <div class="title">友情链接</div>

      <div class="xiahuanx"></div>

      <ul>
        <a target="_blank" v-for="item in navList.result" :href="item.href"
          ><li>
            <i class="fa fa-spinner" aria-hidden="true"></i>{{ item.title }}
          </li></a
        >
      </ul>
    </div>
  </div>
</template>
<style scoped lang="scss">
.right {
  width: 20%;
  margin-right: 3%;
  .intro {
    width: 100%;
    background-color: var(--el-bg-color-overlay);
    border-radius: 5px;
    .img1 {
      width: 100%;
      height: 120px;
      background-image: url(https://api.adicw.cn/uploads/DfImg/QQ%E5%9B%BE%E7%89%8720190417192123.jpg);
      background-size: cover;
      border-radius: 5px 5px 0 0;
    }
    .img2 {
      position: relative;
      margin-left: calc(50% - 40px);
      top: -30px;
    }
  }
  .about {
    .add_fref {
      float: right;
      cursor: pointer;
    }
    ul {
      margin-left: 15px;
      margin-right: 15px;
      padding-top: 15px;
      padding-bottom: 20px;
      border-top: 1px solid var(--el-border-color);
      li:hover {
        box-shadow: 1px 1px 15px var(--el-color-info-light-3);
      }
      li {
        margin-top: 10px;
        height: 30px;
        line-height: 30px;
        background-color: var(--el-color-info-light-8);
        border-radius: 5px;
        font-size: 10px;
        overflow: hidden;
        color: var(--el-color-info);
        transition: all 0.3s;

        i {
          margin-left: 10px;
          margin-right: 5px;
        }
      }
    }
  }
  .tags {
    padding-bottom: 30px;
    .xiahuanx {
      margin-left: 20px;
      z-index: 2;
    }
    .body {
      position: relative;
      margin-left: 20px;
      margin-right: 20px;
      padding-top: 20px;
      border-top: 1px solid var(--el-border-color);
      ul {
        display: flex;
        flex-wrap: wrap;
        @keyframes move_box {
          0% {
            left: 0;
            top: 0;
          }
          25% {
            left: 100%;
            top: 0;
          }
          50% {
            top: 100%;
            left: 100%;
          }
          75% {
            left: -20px;
            top: 100%;
          }
          100% {
            left: -20px;
            top: 0;
          }
        }
        &::before {
          position: absolute;
          top: 0;
          left: 0;
          display: block;
          width: 20px;
          height: 20px;
          content: "";
          background-color: var(--el-color-success);
          -webkit-animation-name: move_box;
          animation-name: move_box;
          -webkit-animation-duration: 5s;
          animation-duration: 5s;
          -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
        }
        li {
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--el-text-color-primary);
          width: 33.33%;
          height: 40px;
          box-sizing: border-box;
          background-color: var(--el-color-success-light-5);
          &:nth-child(6n + 1),
          &:nth-child(6n + 2),
          &:nth-child(6n + 3) {
            background-color: var(--el-color-success-light-7);
          }
          &:nth-child(3n + 1),
          &:nth-child(3n + 2) {
            border-right: 1px solid var(--el-text-color-disabled);
          }
        }
      }
    }
  }
}
.dialog_content {
  > div {
    margin-bottom: 10px;

    > label {
      display: block;
      margin-bottom: 5px;
    }

    .icon_href {
      width: 70%;
    }

    .icon_img {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 30%;

      img {
        height: 40px;
      }
    }
  }
}
</style>
